<UserControl x:Class="SimpleNavigationWithRegion.Views.RedSquare"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    
    <Grid x:Name="LayoutRoot" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}"
          RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
            <ScaleTransform/>
        </Grid.RenderTransform>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ShowAndHide">
                <VisualStateGroup.States>
                    <VisualState x:Name="ShowState">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="LayoutRoot"
                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimation 
                                             Duration="0:0:0"
                                             Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                                             From="0.3" To="1.0"/>
                            <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                             From="0.3" To="1.0"/>
                            <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.Opacity)"
                                             From="0.3" To="1.0"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="HideState">
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                                             From="1.0" To="1.2"/>
                            <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                            From="1.0" To="1.2"/>
                            <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.Opacity)"
                                             From="1.0" To="0.3"/>
                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="LayoutRoot"
                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup.States>
                <VisualStateGroup.Transitions>                    
                    <VisualTransition To="HideState">
                        <Storyboard>
                            <DoubleAnimation 
                                Duration="0:0:0.2"
                                Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                                             From="1.0" To="1.2"/>
                            <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                             From="1.0" To="1.2"/>
                            <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="LayoutRoot"
                                             Storyboard.TargetProperty="(UIElement.Opacity)"
                                             From="1.0" To="0.3"/>
                            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="LayoutRoot"
                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Rectangle Width="400" Height="400" Fill="Red"/>
    </Grid>
</UserControl>
